<template>
    <section class="choose--container content">
        <nav-bar
			title="确认订单"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

        <view>
            <radio-group @change="radioChange">
                <label
                    class="uni-list-cell uni-list-cell-pd radio"
                    v-for="(item, index) in items"
                    :key="item.value"
                >
                    <div class="choose-content">
                        <p>
                            {{ item.name }}
                            <span>重庆 {{ item.num }}家影院</span>
                        </p>
                        <radio color="#F24244" :value="item.value" :checked="index === current" />
                    </div>
                </label>
            </radio-group>
        </view>
        <apple-sliver></apple-sliver>
    </section>
</template>
<script>
import NavBar from "../../components/nav-bar";

export default {
    components: {
        NavBar,
    },
    data() {
        return {
            items: [
                {
                    value: "UME影城",
                    name: "UME影城",
                    num: 10
                },
                {
                    value: "金逸影城",
                    name: "UME金逸影城影城",
                    num: 100
                }
            ],
            current: 0
        };
    },
    onLoad() {},
    methods: {
        radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.target.value) {
                    this.current = i;
                    break;
                }
            }
        }
    }
};
</script>
<style lang="scss">
.choose--container {
    overflow-y: scroll;
    min-height: 100vh;
    background-color: #f4f4f4;
    > view {
        margin-top: 10px;
        background-color: #fff;
        .radio {
            width: 100%;
            display: block;
            height: px2vw(60);
            &:not(:last-child) {
                border-bottom: px2vw(1) solid #ddd;
            }
            .choose-content {
                width: 95%;
                margin: 0 auto;
                &:after {
                    display: block;
                    content: "clear";
                    clear: both;
                    height: 0;
                    width: 100%;
                    overflow: hidden;
                }
                p {
                    width: 85%;
                    float: left;
                    font-size: px2vw($fz16);
                    line-height: px2vw(60);
                    span {
                        float: right;
                        text-align: right;
                        color: $c-light;
                        font-size: px2vw($fz14);
                    }
                }
                radio {
                    margin-top: px2vw(15);
                    float: right;
                }
            }
        }
    }
}
</style>